<!-- 大！哒哒哒...轮播图 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"
            style="background: url(https://img.7hua.com/imgbanner/banner12.jpg) center 0px no-repeat;"></div>
        <div class="swiper-slide"
            style="background: url(https://img.7hua.com/imgbanner/banner1.jpg) center 0px no-repeat;"></div>
        <div class="swiper-slide"
            style="background: url(https://img.7hua.com/imgbanner/banner5.jpg) center 0px no-repeat;"></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
<!-- 图片、轮播图组合 -->
<div id="pic_slide">
    <!-- 左侧小又复杂了个喵的轮播图 -->
    <div class="pic_slide_left">
        <!-- 上面三角形移动 -->
        <div id="hd">
            <ul>
                <li class="a f on">
                    <span class="sj1 triangle"></span>
                    <span class="a_text">爆款<br> 本店头牌</span>
                </li>
                <li class="b f">
                    <span class="sj2 triangle"></span>
                    <span class="a_text">新品<br> 狂拽炫酷</span>
                </li>
                <li class="c f">
                    <span class="sj3 triangle"></span>
                    <span class="a_text">特惠<br> 老板在哭</span>
                </li>
                <li class="d f">
                    <span class="sj4 triangle"></span>
                    <span class="a_text">秒杀<br> 抓紧时间</span>
                </li>
                <li class="e f">
                    <span class="sj5 triangle"></span>
                    <span class="a_text">组合<br> 必须拿下</span>
                </li>
            </ul>
        </div>
        <!-- 下面轮播图移动 -->
        <div id="bd">
            <ul class="bd_ul">
                <li class="wrapper_img">
                    <img src="https://www.7hua.com/Tpl/2016skin/Public/imgbanner/2banner5.jpg" alt="">
                </li>
                <li class="wrapper_img">
                    <img src="https://www.7hua.com/Tpl/2016skin/Public/imgbanner/2banner1.jpg" alt="">
                </li>
                <li class="wrapper_img">
                    <img src="https://www.7hua.com/Tpl/2016skin/Public/imgbanner/2banner2.jpg" alt="">
                </li>
                <li class="wrapper_img">
                    <img src="https://www.7hua.com/Tpl/2016skin/Public/imgbanner/2banner3.jpg" alt="">
                </li>
                <li class="wrapper_img">
                    <img src="https://www.7hua.com/Tpl/2016skin/Public/imgbanner/2banner4.jpg" alt="">
                </li>
                <li class="wrapper_img">
                    <img src="https://www.7hua.com/Tpl/2016skin/Public/imgbanner/2banner5.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
    <!-- 中间图片 -->
    <div class="pic_slide_center">
        <div class="pic_slide_center_top">
            <a href="">
                <img src="https://www.7hua.com/Tpl/2016skin/Public/imgbanner/300-210-1.jpg
                " alt="">
            </a>
        </div>
        <div class="pic_slide_center_bottom">
            <a href="">
                <img src="https://www.7hua.com/Tpl/2016skin/Public/imgbanner/300-210-2.jpg" alt="">
            </a>
        </div>
    </div>
    <!-- 右边图片 -->
    <div class="pic_slide_right">
        <div class="pic_slide_right_top">客服中心 CALL CENTER</div>
        <div class="pic_slide_right_bottom">
            <ul>
                <li>
                    <a href="" calss="a1">
                        400-658-1177
                    </a>
                </li>
                <li>
                    <a href="" class="a2">
                        139 010 788
                    </a>
                </li>
                <li>
                    <a href="" class="a3">
                        在线客服点我咨询
                    </a>
                </li>
            </ul>
            <div class="erweima">
                <img src="https://www.7hua.com/Tpl/2016skin/Public/images/android_ewm.png" alt="">
                <p> APP订购享优惠</p>
            </div>
        </div>
    </div>
</div>
<div class="fly1">
    <img src="	https://www.7hua.com/Tpl/2016skin/Public/images/rightok.jpg" alt="">
</div>
<div class="fly2">
    <div class="fly2_img">
        <!-- <img src="" alt=""> -->
    </div>
    <div class="fly2_text">
        我们在线，来聊聊吧
    </div>
</div>
<script src="./javascripts/jQuery.js"></script>
<script>
    $(function () {
        // 大！哒哒哒...轮播图
        var mySwiper = new Swiper('.swiper-container', {
            effect: 'fade',
            autoplay: true,
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                // type : 'custom',
                // bulletElement : 'span',
            },
        })
        for (i = 0; i < mySwiper.pagination.bullets.length; i++) {
            mySwiper.pagination.bullets[i].onmouseover = function () {
                this.click();
            };
        }
        //小！啸啸啸...轮播图 
        // 顶部小三角移动

        function move_triangle() {
            let i = 0;
            let k = 0;
            let time1 = setInterval(function () {
                $("#hd li")
                    .eq(i - 1)
                    .off("mouseover.a");
                $("#hd li")
                    .removeClass("on");
                if (i === 5) {
                    i = 0;
                }
                $("#hd li")
                    .eq(i)
                    .addClass("on");
                // $("#hd li")
                //     .eq(i)
                //     .on("mouseover.a", function () {
                //         clearInterval(time1);
                //     });
                i++;
                if (k === 6) {
                    k = 1
                    $(".bd_ul")
                        .css({
                            left: -0 + "px",
                        })
                }
                $(".bd_ul")
                    .animate({
                        left: k * -630 + "px",
                    });
                k++;



            }, 1000);





        }
        move_triangle();
    })
</script>